<template>
    <div class="exploreFiles">
        <!-- 当前目录信息 -->
        <div class="top shadow  bg-white rounded">
            <div class="choosedItem iconfont">
                <div class="dirImg icon-dir"></div>
            </div>
            <div class="dirInfo">
                <div class="dirInfo-title" >
                    <span>当前：</span> <span v-text="
                    !$store.getters.getCurrentItem ? '': 
                    $store.getters.getCurrentItem.title     
                    "></span>
                </div>
                <div class="dirInfo-common" >
                    <span>简介：</span> <span v-text="
                    !$store.getters.getCurrentItem ? '': 
                    $store.getters.getCurrentItem.common 
                    "></span>
                </div>
            </div>
        </div>
        <!-- 操作按键 -->
        <div class="oprOfDir iconfont m-2 ">
            <div class="oprItem" >
                <button type="button" 
                @click="backOffMenu"
                style="vertical-align: -8px;"
                class="btn btn-sm btn-outline-dark">返回上级目录</button>
                </div>
            <div class="oprItem">
                <button type="button" class="mr-2 btn btn-sm btn-outline-secondary"
                @click="mkfile"
                >
                <span class=" add-notebook " >
                    <span class="newDir"
                    
                    >新建文章</span>    
                </span>
                </button>
                <button type="button" class="btn btn-sm btn-outline-secondary"
                @click="makeSubDir"
                >
                <span class=" add-notebook " >
                    <span class="newDir"
                    
                    >新建文件夹</span>    
                </span>
                </button>
            </div>
        </div>
        <!-- 目录路径 -->
        <div class="pathOfDir">
            
            <nav aria-label="breadcrumb ">
                
                <ol class="breadcrumb ">
                    <!-- <li class="breadcrumb-item">
                        <button type="button" 
                        @click="backOffMenu"
                        class="btn btn-sm btn-outline-dark">返回上级目录</button>
                    </li> -->
                    <li class="breadcrumb-item"
                    v-for="(item , index) in $store.getters.getPathOfNotebook " :key="index"
                    >{{ item.title }}</li>
                </ol>
            </nav>
        </div>
        <!-- 当前目录下的内容 次级目录 -->
        <div class="viewerOfDir ">
           <label 
           class="viewContent border border-dark rounded justify"
           for="exploreView"
           @click.stop="checkItem($event)" 
           @contextmenu.prevent.stop="rightClick" 
           >
            <directory
            v-for="( item , index ) in innerDirlist"
            :key="index"
            :dirItem="item" 
            :indexOfItem="index"
            :cur="current"
            @rmThis="rmInnerDir"
            @renameInner="renameSubDir"
            @checkout="viewPost"
            @editor="editArticle"   
            ></directory>
            <div class="pre_fix" >&nbsp;</div>
            <div class="pre_fix" >&nbsp;</div>
            <div class="pre_fix" >&nbsp;</div>
            <div class="pre_fix" >&nbsp;</div>
            <div class="pre_fix" >&nbsp;</div>
            <div class="pre_fix" >&nbsp;</div>
            <div class="pre_fix" >&nbsp;</div>
            <div class="pre_fix" >&nbsp;</div>
           </label>
           <input class="hidden" 
            @focus="getFocus"
            @blur="loseFocus"
           type="text" id="exploreView">
            <!-- 右键菜单 -->
            <div class="popMenu"
            @contextmenu.prevent.stop=""
            :style="`
            display: ${popMenu.show} !important;
            left: ${popMenu.y}px !important;
            top: ${popMenu.x}px !important;
            `"
            >  
               
                <!-- 新建文章 -->
                <div 
                @contextmenu.prevent.stop=""
                
                @click.stop="mkfile"
                class="popMenu-item">新建文章</div>
                <!-- 新建子目录 -->
                <div class="popMenu-item"
                @contextmenu.prevent.stop=""
                
                @click.stop="makeSubDir"
                >新建子目录</div>
            </div>
            
        </div>
            <!-- 分页选项 v-if="pageInfo.total > 0"-->
            <div  v-if="$store.getters.getPageInfo.len > 0" class="pageB">
                <nav aria-label="Page navigation example">
                    <ul class="pagination">
                        <li 
                        @click="prePage"
                        :class="{ disabled : currentInnerPage == 1 }"
                        class="page-item">
                        <a class="page-link"  aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                        </li>
                        <li 
                        v-for="n in $store.getters.getPageInfo.len" :key="n"
                        :class="{ active: currentInnerPage == n }"
                        @click="getPage( n )"
                        class="page-item"><a class="page-link" >{{n}}</a></li>
                        <li 
                        @click="nextPage"
                        :class="{ disabled : currentInnerPage == $store.getters.getPageInfo.len }"
                        class="page-item">
                        <a class="page-link"  aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                        </li>
                    </ul>
                </nav>
            </div>
    </div>
</template>

<script>

import directory from "./directory.vue";
import { freshToken } from "../../../../../api/interface/token.js";
import { getInnerDirContent } from "../../../../../api/interface/filesystem.js";

export default {
    // props:['currentItem'],
    components:{
        directory
    },
    data(){
        return {
            currentSet: " ",
            innerDirlist:[],
            popMenu:{
               x: 0,
               y: 0,
               show: "none",
               focus: false,
               timeoutId: null
           },
           current: -1, //次级目录当前选中位置
           currentInnerPage: 1, //当前第一页 次级目录分页
           pageSize: 18, //每页18条数据
        };
    },
    provide:function(){
        let that = this;
        return {
               explorer: function(){
                   return that;
               }
        };
    },
    inject:['noteAgent'],
    methods:{
        //获取某一页
        getPage( index ){
            let that = this;
            console.log("get page: ", index);
            let target = this.$store.getters.getEndOfPathOfNotebookItem;
            target.pageIndex = index; //设置当前页码
            this.fatchData(
                target,
                function(){
                    that.currentInnerPage = index;
                }
            );
        },
        //前一页
        prePage(){
            let pageinfo = this.$store.getters.getPageInfo;
            if( ( this.currentInnerPage - 1 ) >= 1 ){
                this.currentInnerPage--;
                this.getPage( this.currentInnerPage );
            }
            
        },
        //后一页
        nextPage(){
            let pageinfo = this.$store.getters.getPageInfo;
            if( ( this.currentInnerPage + 1 ) <= pageinfo.len ){
                this.currentInnerPage++;
                this.getPage( this.currentInnerPage ); 
            }
                       
        },
        //分配页码
        setPageNumber( total , size ){
            if( size == 0 ) return 0;
            let count = parseInt(  total / size );
            //调整
            if( ( total % size ) > 0 ){
                count++;
            }
            return count;
        },
        //聚焦右键菜单显示区域，文章目录显示区域
        getFocus(){
            clearTimeout(this.popMenu.timeoutId);
        },
        //失去焦点右键菜单显示区域，文章目录显示区域
        loseFocus(){
            let that = this;
            this.popMenu.timeoutId = setTimeout(function(){
                that.popMenu.show = "none";
            }, 120);
        },
        //右键菜单
        rightClick( e ){
            this.popMenu.show = "block";
            this.popMenu.y = e.offsetX;
            this.popMenu.x = e.offsetY;
            e.target.focus();
        },
        //新建文件
        mkfile(){
            let note = this.noteAgent();
            note.popup.mkfile = true;
        },
        //新建子目录
        makeSubDir(){
            
            let note = this.noteAgent();
            note.popup.subDir = true;
        },
        //获取次级目录内容
        fatchData( target , fn){
            
            let that = this;
            let qdata = this.witchItem;
            let current = {};
              
                
            if(target.top_id){
                current.top_id = target.top_id;
            }
            if(target.inner_id){
                current.inner_id = target.inner_id;
            }
            current.offset = (target.pageIndex - 1) * this.pageSize;
            current.pageSize = this.pageSize;
            
            getInnerDirContent(
                current
            ).then(res=>{
                
                // that.innerDirlist = that.innerDirlist.concat(res.data.data.innerDirs);
                console.log("res: ", res.data.data);
                that.innerDirlist = res.data.data.innerDirs;
                //配置分页属性
                let info = 
                this.$store.commit('setPageInfo',
                {
                  
                  total: res.data.data.total, //总共几条数据
                  len: this.setPageNumber(res.data.data.total , this.pageSize )
                }
                );


                if( typeof fn == 'function' ){
                    fn();
                }
                
                
            }).catch(err=>{
                this.$httpError.checkResStatus(err.data,function(){
                    
                    //重新请求生成token
                    freshToken().then(res=>{
                        
                        localStorage.setItem("token", res.data.data.token);
                        that.fatchData( target , fn );
                    })
                },that);
            });
        },
        //改变当前item, 查看某个目录 次级目录
        checkItem( e ){
            
            let that = this;
            
            if( typeof e.target.dataset.index == 'undefined' ) {
                this.current = -1; //取消选中
                this.popMenu.show = "none";
                
                return ;
            }

            let index = parseInt( e.target.dataset.index );
            let item = this.innerDirlist[index];
            

            if( item.inner_id ){
                //查看目录
                this.$store.commit("setCurrentItem", item );
                let { ...addPageIndex } = item;
                addPageIndex.pageIndex = this.currentInnerPage; //当前目录归属页码
                this.$store.commit("setMenuPath", addPageIndex );
                let target = this.$store.getters.getEndOfPathOfNotebookItem;
                //改变显示目录显示区域
                this.fatchData( 
                    target
                    );
            }else{
                //查看文章
                this.viewPost( index );
            }   
            
             
        },
        // 删除子目录
        rmInnerDir( index ){
            let that = this;
            let innerDirItem = this.innerDirlist[index];
            //设置将要删除目录的信息
            this.$store.commit("setRmItem", innerDirItem);
            let note = this.noteAgent();
            //打开删除目录提示弹层
            note.popup.rmDir = true;
        },
        //返回上一个目录
        backOffMenu(){
            // let item = this.$store.getters.getEndOfPathOfNotebookItem;
            let that = this;
            this.$store.commit("feetBackMenuPath");
            let target = this.$store.getters.getEndOfPathOfNotebookItem;
            this.fatchData(
                target ,
                function(){
                    that.currentInnerPage = target.pageIndex;
                }
            );

        },
        //重命名次级目录
        renameSubDir( index ){
            //设置重命名目录参数
            this.$store.commit("setRenameObjectOption", this.innerDirlist[index]);
            //打开重名弹层
            let note = this.noteAgent();
            note.popup.rename_innerDir = true;
        },
        // 查看文章
        viewPost( index ){
            
            let note = this.noteAgent();
            
            //设置当前查看问站对象
            this.$store.commit("setcurrentViewpost", 
            { constent : this.innerDirlist[index],
              index : index
             } );
            note.popup.checkFile = true;
        },
        //编辑文章
        editArticle( index ){
            let note = this.noteAgent();
            //设置当前编辑对象的参数信息
            this.$store.commit("setCurrentEditArticle" , this.innerDirlist[index] );
            note.popup.editFile = true;
        }
    },
    mounted() {
        let that = this;
        
        //等待至初次加载
        let waitFor = setInterval(() => {
            if( that.$store.getters.getCurrentItem ){
                let target = this.$store.getters.getEndOfPathOfNotebookItem;
                
                that.fatchData( target );
                clearInterval(waitFor);
            }
        }, 1000);
    },
}
</script>

<style lang="scss"  >

.exploreFiles{
    position: relative;
    padding: .5em;
   
    .top{
        
        display: flex;
        align-items: center;
        
    }
    .oprOfDir{
        
    
        display: flex;
        justify-content: space-between; 
    }
    .pathOfDir{
        
    
    }
    .viewerOfDir{
        min-height: 500px;
        padding: .5em;
        position: relative;
         .viewContent{
            // position: absolute;
            // top: 0; bottom: 0; left: 0; right: 0;
            // display: inline-block;
            min-height: 600px;
            padding: .8em;
               
        }
    }
   
}
.icon-dir::before{
    content: "\e614";
    font-size: 3em;
    line-height: 1.5em;
    margin-left: .3em;
    margin-right: .3em;
}

//两端对齐
.justify{
    // text-align: justify;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
    
    
}
.justify:after{
    display: block;
    content: '';
    width: 100%;
    line-height: 0;
    font-size: 0;
}
//自适应
.pre_fix{
    display: block;
    width: 99px;
    height: 0px;
    margin: .3em;

}

.newDir{
    line-height: 1.5em;
    vertical-align: .2em;
}

</style>